<!--
 * @Author: tansq
 * @Date: 2021-10-13 13:35:59
 * @LastEditTime: 2021-11-29 10:22:47
 * @LastEditors: tansq
 * @Description: 附件通用组件
 * @FilePath: \hte-vue-dev\src\views\projectBuildStup\AttachPageNormal.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <div class="" style="padding-bottom:30px;">
  
    <div class="" style="padding-bottom:15px;border-bottom: 1px solid #f7f7f7;">
      <div class="">
     
        
        <div class="title" >{{attach.name}}</div>
        <!-- <div class="infoTips" >
          <a-icon type="exclamation-circle" theme="filled" style="color: #47a4fa" />
          请按项目附件表提醒的文件清单上传文件，还有其他附件的可以上传到此处。
        </div> -->
        <div class="otherAttach" >
          <div class="upload-control" style="display: flex">
            <ht-upload
              
              ref="attachs"
              class="upload-demo"
              multiple
              :dbKey="dataDefault.dbKey"
              :busField="dataDefault.busField"
              :busKey="dataDefault.busKey"
              :disabled="!canEdit"
              :busType="dataDefault.busType"
              :ftpKey="dataDefault.ftpKey"
              v-model="filelist"
              :on-success="fileUploadSuccess"
             
              :httpRequest="(option)=>httpRequest(option,this.$refs.attachs,attach.code)"  
            >
              <el-button size="small" type="primary" style="height: 30px;width:85px;" v-bind:disabled="!canEdit">
                <span style="font-size: 14px;"
                  >上传<span v-if="attach.required" style="color: red">&nbsp;*</span></span
                ></el-button
              >
            </ht-upload>
            <a-button type="primary"  @click="reload('normal')" style="margin-left: 10px">刷新</a-button>
            <a-button type="primary" v-bind:disabled="!downloadAndView" @click="downLoadBatch(0)" style="margin-left: 10px">下载</a-button>
             <a-button style="width:auto" type="primary" v-bind:disabled="!downloadAndView" @click="downLoadBatch(1)">一键打包下载</a-button>
            <a-button
              class="default"
              @click="deleteBatch()"
              v-bind:disabled="!canEdit"
              >删除</a-button
            >
          </div>
          <a-table
            :row-selection="{ selectedRowKeys: attachSelectedIds, onChange: attachSelected ,getCheckboxProps:record=>({props: {
            disabled: !(!record.status || record.status == 'success') , // Column configuration not to be checked
            name: record.status,
          },})}"
            :columns="attachColumns"
            :data-source="attachDataList"
            bordered
            :pagination="false"
          >
            <!-- <template slot="name" slot-scope="text, record">
              <a @click="showAttach(record.key, record.uploader, record.name, true, 'main')">{{ record.name }}</a>
            </template> -->
            
             <template slot="name" slot-scope="text, record">
              <a  @click="showAttach(record.key, record.uploader, record.name, true, 'main')">{{ record.name }}</a>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import $ from 'jquery'
import '@/utils/upload.install.js'
import { getAction, postAction, getActionAsync,getAttaches } from '@/api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { formatFileSize, endWith, strNotNull } from '@/utils/common.js'

const attachColumns = [
  {
    title: '附件名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '附件大小',
    dataIndex: 'size',
    width: '15%',
  },
  {
    title: '上传时间',
    dataIndex: 'time',
    width: '20%',
  },
  {
    title: '上传者',
    dataIndex: 'uploaderName',
    width: '20%',
  },
]

export default {

  components: {
    MainAttach: () => import('@/components/tools/projectBuildStup/MainAttach'),
  },
  data() {
    return {

      //其他附件字典配置
   
      filelist: [],
      attachDataList: [],
      attachColumns,
      attachSelectedIds: [], // Check here to configure the default column
      loading: false,

      url: {
        getRequiredAttachCode: '/projectBuild/getRequiredAttachCode'
      },
      dataDefault: {
        dbKey: 'Trd',
        ftpKey: !!this.attach.ftpKey?this.attach.ftpKey:'ftp',
        busKey: this.changeId ? this.projectBuildId+'_'+this.changeId : this.projectBuildId,
        busField:this.changeId ? 'ProjectBuildChange' : 'ProjectBuild',
        busType: this.attach.code
      },
     
     
      canDoSave: this.$route.query.canDoSave=='true' ? true : false
    }
  },
   props:{
        projectBuildId: {
          Type: String,
          default: ''
         },
        attach: {
          Type: Object,
          default:{}
        },
        projectBuild: {
          Type: Object,
          default:{}
        },
        canEdit: {
          Type: Boolean,
          default: false 
        },
        downloadAndView:{
          Type: Boolean,
          default: false 
        },
       changeId: {
          Type: String,
          default: ''
        } 
    },
  mounted() {
    let vm = this
    
    // vm.$refs.attachs.fileListDefault=[]
    var currentAudit = this.$route.query.currentAudit
    this.currentAudit = currentAudit == 'true' ? true : false
  },
  computed: {},
  watch: {
    filelist: {
      deep:true,
      handler:function(){
          this.attachDataListFresh()
      }
    },
   
  },
  methods: {
     // 如果父组件显示传递fileList，则不再请求后台数据，反之去后台请求初始化数据(存在附件id或者存在业务主键和业务模块）
    getAttaches(){
       if (((this.dataDefault.busKey && this.dataDefault.busField))) {
         this.filelist = []
        getAttaches(this.dataDefault).then(result => {
          
          if(result.code == 1){
          this.filelist = result.data

          }else{
            console.log(`查询附件列表失败：${result.msg}`)
          }
        }).catch(err => {
          console.log(`查询附件列表失败：${err.message}`)
        })
       }
      },
     onProgress(event, file, fileList){

      
    },
    onError(err, file, fileList){
     
    },
    fileUploadSuccess(response,file,fileList){
        
        this.$emit('fileUploadSuccess',response,file,fileList,this.attach.code)
      },
    
    showAttach(id, uploader, fileName, autoDownload,type) {
    
      this.$emit('showAttach',id, uploader, fileName, autoDownload,type,this.attach.ftpKey);
    },
    httpRequest(option,$refs,attachCode){
      this.$emit('httpRequest',option,$refs,attachCode);
    },
    reload(type){
      
      this.$emit('reload',type,this.dataDefault,this,'filelist')
      // this.getAttaches('reload',type);
    },
    attachDataListFresh() {
      this.attachDataList = []
      this.filelist.forEach((item) => {
        var size = formatFileSize(item.size)
        this.attachDataList.push({
          key: item.id || item.uid,
          name: item.fileName||item.name,
          size: size,
          time: item.uploadTime,
          uploader: item.uploader,
          uploaderName: item.uploaderName,
          status:item.status || 'success',
          percentage:item.percentage,
          uid:item.uid
        })
      })
    },

    attachSelected(selectedRowKeys) {
      this.attachSelectedIds = selectedRowKeys
    },
     deleteFileList(){
      
        this.attachSelectedIds.forEach(item=>{
          let index = -1
        if(!item.status||item.status=='success'){
           index = this.filelist.findIndex(attach=>{return attach.id==item})
        }
        if(item.status=='fail'){
           index = this.filelist.findIndex(attach=>{return attach.uid==item})
        }
         
          if(index != -1){
            this.filelist.splice(index,1);
          }

          })
        this.attachSelectedIds = []

      },
   
    downLoadBatch(status = 0){
      if(status == 1){
         let ids = []
          this.filelist.map(item=>{
            ids.push(item.id)
          })
        this.$emit('downLoadBatch',ids,this.attach.ftpKey)
        return
      }
      if (this.attachSelectedIds != null && this.attachSelectedIds.length > 0) {
      
        this.$emit('downLoadBatch',this.attachSelectedIds,this.attach.ftpKey)
        this.attachSelectedIds = []
      } else {
        this.$message.warning('请选择要下载的附件')
      }
    },
    deleteBatch() {
      if (this.attachSelectedIds != null && this.attachSelectedIds.length > 0) {
        
        let attachCodes = []
        this.attachSelectedIds.forEach(item=>{
          attachCodes.push(this.attach.code)
        })
        this.$emit('deleteBatch',this.attachSelectedIds.join(','),attachCodes.join(","),this.deleteFileList,this.attach.ftpKey)
        
      } else {
        this.$message.warning('请选择要删除的附件')
      }
    },
  
   


  },
}
</script>
<style lang="less" scoped>
/deep/.el-upload-list {
  display: none;
}
/deep/.anticon {
  font-size: 16px;
  vertical-align: middle;
}
/deep/ .ant-btn-primary {
  width: 85px;
  height: 30px;
  border-radius: 2px;
  background: #1890FF;
  margin-right: 10px;
}
/deep/ .default {
  width: 85px;
  height: 30px;
  border-radius: 2px;
}
/deep/ .ant-table-thead > tr > th {
  background: #dadee9 !important;
}
/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/ .ant-table table {
  border-radius: unset;
  line-height: 1;
}
/deep/ .ant-table-tbody .ant-table-row td {
  &:nth-child(2) {
    color: #3e8ee2;
  }
}
/deep/ .ant-table-tbody .ant-table-row td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.attach {
  border: 1px solid #e6e6e6;
  background-color: #fff;
  padding-bottom: 30px;
  .header {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    padding: 20px 0 0 20px;
  }
  .content {
    padding: 15px;
    .projectFile {
      .title {
        border-left: 3px solid #47a4fa;
        padding: 0 10px;
        .download-control {
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
    ul {
      list-style: none;
      padding: 15px 0;
      border-bottom: 1px solid #f7f7f7;
      li {
        padding: 15px !important;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
      }
      .upload-demo {
        display: flex;
        /deep/ .el-upload {
          margin-right: 10px;
        }
      }
    }
    .infoTips {
      background: #e6f7ff;
      border: 1px solid #aee1ff;
      border-radius: 4px;
      margin: 20px 0;
      padding: 5px 10px;
      font-size: 12px;
      width: fit-content;
    }
    .otherAttach {
      margin-top: 20px;
      .upload-control {
        margin-bottom: 15px;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }
}
</style>